import { AntdBaseTable } from '@/base/TBaseTable';
import { useDeepCompareEffect } from 'ahooks';
import { features, useTablePipeline } from 'ali-react-table';
import type { MultiSelectFeatureOptions } from 'ali-react-table/dist/pipeline/features';
import type { PaginationProps } from 'antd';
import { Checkbox, Pagination } from 'antd';
import React from 'react';
import FilterDropdown from '../FilterDropdown';
import styles from './index.less';

interface IAppProps {
  columns: any[];
  defaultColumnWidth?: number;
  tableData: any[];
  primaryKey?: string;
  style?: Record<string, unknown>;
  hasIndexNumber?: boolean;
  filterObj?: Record<string, unknown>;
  handleEvent?: (params: any, operateKey: string) => void;
  checkValue?: any[];
  hasMultiSelect?: boolean;
  multiSelectProps?: MultiSelectFeatureOptions;
  handleChange?: (nextValue: string[]) => void;
  hasMultiSelect1?: boolean;
  handleChange1?: (nextValue: string[]) => void;
  hasPagination?: boolean;
  paginationConfig?: PaginationProps;
  onChangePage?: (pageNumber: number, pageSize: number) => void;
  rowSelection?: () => void;
}

const TRTable: React.FunctionComponent<IAppProps> = (props) => {
  const {
    columns = [],
    tableData = [],
    defaultColumnWidth = 100,
    primaryKey = 'id',
    style = {},
    hasIndexNumber = false,
    filterObj = {},
    checkValue = [],
    handleEvent,
    hasMultiSelect,
    multiSelectProps,
    handleChange,
    hasMultiSelect1,
    handleChange1,
    hasPagination = false,
    paginationConfig = {},
    onChangePage,
  } = props;

  const _handleEvent = (params: any, operateKey: string) => {
    handleEvent && handleEvent(params, operateKey);
  };

  useDeepCompareEffect(() => {}, [paginationConfig]);

  let columnsRe = columns;
  if (hasIndexNumber) {
    columnsRe = [
      {
        name: '序号',
        code: 'indexNumber',
        align: 'left',
        width: 50,
        render: (value: any, record: any, rowIndex: number) => rowIndex + 1,
      },
      ...columnsRe,
    ];
  }
  columnsRe.forEach((item) => {
    if (item.filter) {
      item.title = (
        <FilterDropdown
          title={item.name}
          onFilterChange={_handleEvent}
          colCode={item.code}
          filterObj={filterObj}
          filter={item.filter}
        />
      );
    }
  });

  const _handleChange = (nextValue: string[]) => {
    handleChange && _handleChange(nextValue);
  };

  const pipeline = useTablePipeline({ components: { Checkbox } })
    .input({ dataSource: tableData, columns: columnsRe })
    .primaryKey('taskId'); // 每一行数据由 id 字段唯一标记
  // table多选
  if (hasMultiSelect) {
    pipeline.use(
      features.multiSelect({
        highlightRowWhenSelected: true,
        checkboxPlacement: 'start',
        // checkboxColumn: { lock: true },
        clickArea: 'cell',
        value: checkValue,
        // onChange: _handleChange,
        onChange: handleChange,
        ...multiSelectProps,
      }),
    );
  }

  const pipeline1 = useTablePipeline({ components: { Checkbox } })
    .input({ dataSource: tableData, columns: columnsRe })
    .primaryKey('id'); // 每一行数据由 id 字段唯一标记
  // table多选
  if (hasMultiSelect1) {
    pipeline1.use(
      features.multiSelect({
        highlightRowWhenSelected: true,
        checkboxPlacement: 'start',
        // checkboxColumn: { lock: true },
        clickArea: 'cell',
        value: checkValue,
        // onChange: _handleChange,
        onChange: handleChange1,
        ...multiSelectProps,
      }),
    );
  }

  const onChange: PaginationProps['onChange'] = (pageNumber, pageSize) => {
    // @ts-ignore
    onChangePage && onChangePage(pageNumber, pageSize);
  };

  const pipelineProps = hasMultiSelect1 ? pipeline1.getProps() : pipeline.getProps();

  return (
    <div className={styles.listWrap}>
      <div className={styles.tableWrap} style={{ overflow: tableData.length ? '' : 'hidden' }}>
        <AntdBaseTable
          primaryKey={primaryKey}
          useVirtual={true}
          className={['compact', 'dark'].join(' ')}
          defaultColumnWidth={defaultColumnWidth}
          style={style}
          {...pipelineProps}
        />
      </div>
      {hasPagination && tableData.length ? (
        <Pagination
          size="small"
          showSizeChanger
          showQuickJumper
          {...paginationConfig}
          onChange={onChange}
          showTotal={(total) => `共 ${total} 条`}
        />
      ) : null}
    </div>
  );
};

export default TRTable;
